<template>
  <view class="my-userinfo">
    <!-- 头像昵称区域 -->
    <view class="top-box">
      <view class="avatar">
        <image v-bind:src="userImg_show"></image>
        <view class="avatar-info">
          <view class="avatar-name">
            <span>{{username}}</span>
            <span>(11平台账号)</span>
          </view>
          <view class="avatar-wx">
            <view class="jb-wx" @click="dialogToggle" v-if="!isPhone">
              解绑微信
            </view>
            <view class="edit" @click="exit">
              退出登录
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 面板的列表区域 -->
    <view class="panel-list">
      <!-- 第一个面板 -->
      <view class="panel">
        <!-- panel 的主体区域 -->
        <view class="panel-body">
          <view class="panel-item" @click="gotoMyOrderView">
            <text class="wddd"></text>
            <text>我的订单 (<text style="color:rgba(229, 102, 46, 1)">{{order_num}}</text>)</text>
          </view>
        </view>


        <view class="panel-body">
          <!-- panel 的 item 项 -->
          <view class="panel-item" @click="gotoMyMapView">
            <text class="wdsc"></text>
            <text>收藏的地图 (<text style="color:rgba(229, 102, 46, 1)">{{map_sc_num}}</text>)</text>
          </view>
        </view>

        <view class="panel-body">
          <view class="panel-item" @click="gotoYhqView">
            <text class="wdyhq"></text>
            <text>我的优惠券 (<text style="color:rgba(229, 102, 46, 1)">{{yhq_num}}</text>)</text>
          </view>
        </view>

        <view class="panel-body">
          <view class="panel-item" @click="gotoServer">
            <text class="kfgd"></text>
            <text>客服工单</text>
          </view>
        </view>

        <view class="panel-body">
          <view class="panel-item" @click="shuomingFlag =true">
            <text class="lxkf" ></text>
            <text style="color:rgba(229, 102, 46, 1);font-weight:bold;">联系客服</text>
          </view>
        </view>
      </view>
      <!-- 第二个面板 -->
      <view class="link-model" v-show="shuomingFlag">
        <view class="in-link-model">
          <view class="link-title">
            联系客服方式
          </view>
          <view class="link01">
            1. 微信小程序：<text class="yl" style="font-weight: bold;" >我的订单</text>选择具体订单-点击【联系客服】
            -提交问题描述和截图，客服收到工单后会及时处理。后
            续可通过【客服工单】音看问题处理进度；
          </view>
          <view class="link01">
            2. 11平台客户端：登录11平台客户端-点击【客服】提交
            问题描述和截图，客服收到工单后会及时处理；
          </view>

          <view class="link01">
            3. 11平台官网：登录11平台官网(<text class="yl">www.5211game.com</text>)，
            点击【客服】-提交问题描述和截图，客服收到工单后会及
            时处理；
          </view>
          <view class="link01">
            4. 客服热线：021-23099155，每天 9:00-21:00；
          </view>
          <view class="link01">
            5. 客服邮箱：<text class="yl">kf@5211game.com</text>
          </view>
          <view class="sure-btn" @click="shuomingFlag=false">
            确定
          </view>
        </view>
      </view>
      <!-- 第三个面板 -->
    </view>
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="同意" title="解绑微信账号" content="请确认是否解绑微信账号!"
        @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
    </uni-popup>
    <!-- 提示信息弹窗 -->
    <uni-popup ref="message" type="message">
      <uni-popup-message :type="msgType2" :message="messageText" :duration="2000"></uni-popup-message>
    </uni-popup>
    <view class="goods_nav_tips">
       <text class="kefu_tx"></text> 
       <text class="wenzi">如订单支付或者物品发放有问题，请提交订单反馈</text>
       <text class="link-kefu" @tap="gotoMyOrderView">联系客服</text>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  import md5 from "js-md5"
  export default {
    name: "my-userinfo",
    data() {
      return {
        pi: 1,
        ps: 10,
        sortList: [],
        avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
        username: '',
        shuomingFlag: false,
        msgType: 'warn',
        msgType2: 'warn',
        messageText: '',
        bottomOption:0
      };
    },
    mounted() {
      if (uni.getStorageSync('userinfo')) {
        this.username = JSON.parse(uni.getStorageSync('userinfo')).userName;
      }
      this.QueryUserCoupon();
      this._queryuserorder();
      this.QueryRPGBySearchPager();
      const { safeAreaInsets } = uni.getSystemInfoSync()
      this.bottomOption=safeAreaInsets?.bottom;
    },
    computed: {
      ...mapState('m_user', ['userinfo','isPhone']),
      ...mapGetters('m_user', ['yhq_num', 'order_num', 'map_sc_num', 'userImg_show'])
    },
    methods: {
      ...mapMutations('m_user', ['updateYhqNum', 'updateOrderNum', 'updateMapScNum','clearStorage']),
      gotoMyOrderView() {
        uni.navigateTo({
          url: '/subpkg/my_order/my_order'
        })
      },
      exit(){
        this.$emit('changeSwitch')
      },
      onChooseAvatar(e) {
        const {
          avatarUrl
        } = e.detail
        this.avatarUrl = avatarUrl;
      },
      gotoMyMapView() {
        uni.navigateTo({
          url: '/subpkg/map_sc/map_sc'
        })
      },
      gotoYhqView() {
        uni.navigateTo({
          url: '/subpkg/yhq_view/yhq_view'
        })
      },
      gotoServer() {
        uni.navigateTo({
          url: '/subpkg/questionResult/questionResult'
        })
      },
      dialogToggle() {
        this.$refs.alertDialog.open()
      },
      dialogConfirm() {
        this.unbindWx();
      },
      dialogClose() {
        console.log('点击关闭')
      },
      gotoMyOrderView() {
        uni.navigateTo({
          url: '/subpkg/my_order/my_order'
        })
      },
      //解绑微信接口
      unbindWx() {
        if (uni.getStorageSync('userinfo')) {
          const uid = JSON.parse(uni.getStorageSync('userinfo')).userId;
          const st = JSON.parse(uni.getStorageSync('userinfo')).token;
          uni.request({
            url: `https://passport.9211.com/WebApi/Wap/Action?t=oauthopendisbind&data=${JSON.stringify({BusinessID:1,UserId:uid,ST:st,OpenType:3})}`,
            header: {
              'Content-Type': 'application/json' //自定义请求头信息
            },
            method: 'GET', //请求方式，必须为大写
            success: (res) => {
              console.log('res',res)
              const {
                data
              } = res;
               console.log('data',data);
              if (data.code == 0) {
                this.msgType2 = 'success'
                this.messageText = '解绑成功!'
                this.$refs.message.open()
                this.clearStorage()
              } else {
                this.msgType2 = 'error'
                this.messageText = data.msg;
                this.$refs.message.open()
              }
            }
          })
        } else {
          uni.$showMsg();
        }

      },
      //获优惠券数量
      async QueryUserCoupon() {
        if (uni.getStorageSync('userinfo')) {
          const uid = JSON.parse(uni.getStorageSync('userinfo')).userId;
          const signMd5 = md5(`Bid=65&UserId=${uid}&key=C63A39419CE64F258ADFE3FAF5E63477`);
          const result = await uni.$http.get(
            `/WebApi/Wap/Action?t=queryusercoupon&data=${JSON.stringify({Bid:65,UserId:uid,Sign:signMd5})}`
          )
          const {
            data: res
          } = result;
          console.log('yhq', res.data.list.length);
          if (res.code == 0) {
            this.updateYhqNum(res.data.list.length);
          }
        }

      },
      //获取订单数量
      _queryuserorder() {
        if (uni.getStorageSync('userinfo')) {
          const uid = JSON.parse(uni.getStorageSync('userinfo')).userId;
          const signMd5 = md5(`Bid=65&UserId=${uid}&key=C63A39419CE64F258ADFE3FAF5E63477`);
          uni.$http.get(
            `/WebApi/Wap/Action?t=queryuserorder&data=${JSON.stringify({Bid:65,UserId:uid,Sign:signMd5})}`
          ).then(({
            data: res
          }) => {

            console.log(res);
            if (res.code == 0) {
              this.sortList = res.data.reduce((acc, cur) => {
                // 如果不存在这个键，则设置它赋值 [] 空数组
                if (!acc[cur.Order_id]) {
                  acc[cur.Order_id] = [];
                }
                acc[cur.Order_id].push(cur)
                return acc
              }, {})
            }
            this.updateOrderNum(Object.keys(this.sortList).length);
          })
        }

      },
      //获取收藏地图数量
      async QueryRPGBySearchPager() {
        if (uni.getStorageSync('userinfo')) {
          const uid = JSON.parse(uni.getStorageSync('userinfo')).userId;
          const signMd5 = md5(
            `Bid=65&pi=${this.pi}&ps=${this.ps}&UserId=${uid}&key=C63A39419CE64F258ADFE3FAF5E63477`);;
          const result = await uni.$http.get(
            `/WebApi/Wap/Action?t=queryusercollectedrpg&data=${JSON.stringify({Bid:65,UserId:uid,Sign:signMd5,pi:this.pi,ps:this.ps})}`
          )
          console.log(result)
          const {
            data: res
          } = result;
          if (res.code == 0) {
            this.updateMapScNum(res.data.count)

          }
        }

      },
    }
  }
</script>

<style lang="scss">
  .my-userinfo {
    width: 100%;
    .goods_nav_tips{
      padding-bottom: 20px;
      position: fixed;
      bottom: 0;
      left: 0;
      width:100%;
      height:50rpx;   
      z-index: 10;
       background-color:rgba(0, 0, 0, 0.5);
         font-size: 26rpx;
         color:#fff;
         display: flex;
         justify-content:flex-start;
         align-items: center;
         padding:10rpx;
       .kefu_tx{
         width:33rpx;
         height:34rpx;
         background: url(https://img.5211game.com/Base/xiaochengxu/static/kefu_tx.png);
         background-size: contain;
       }
       .wenzi{
         margin:0 10rpx;
       }
       .link-kefu{
         width:120rpx;
         height:46rpx;
         line-height:46rpx;
         text-align: center;
         background-color: #ff0000;
         font-size:24rpx;
         color:#fff;
         display: block;
         border-radius: 20rpx;
       }
    }
    .link-model {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 10;

      .in-link-model {
        width: 504rpx;
        padding: 38rpx;
        background: #FFFFFF;
        border-radius: 12rpx;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        .link-title {
          width: 100%;
          text-align: center;
          font-size: 28rpx;
          font-family: Microsoft YaHei;
          font-weight: bold;
          margin-bottom: 20rpx;
          color: #1A1A1A;
        }

        .link01 {
          width: 100%;
          text-align: left;
          font-size: 30rpx;
          line-height: 50rpx;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          margin-bottom: 20rpx;

          .yl {
            color: rgba(229, 102, 46, 1);
          }
        }

        .sure-btn {
          width: 220rpx;
          height: 62rpx;
          line-height: 62rpx;
          text-align: center;
          background: #E5662E;
          border-radius: 6rpx;
          margin: 0 auto;
          font-size: 22rpx;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
        }
      }

    }

    .top-box {
      height: 400rpx;
      background-image: url('https://img.5211game.com/Base/xiaochengxu/static/user-bg.png');
      background-size: contain;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .avatar {
        width: 692rpx;
        padding-left: 18rpx;
        margin: 0 auto;
        display: flex;
        height: 120rpx;
        justify-content: flex-start;

        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 45px;
          border: 2rpx solid #EBEBEB;
        }

        .avatar-info {
          width: 550rpx;
          height: 120rpx;
          text-align: left;
          padding-left: 40rpx;
          display: flex;
          justify-content: space-between;
          flex-direction: column;

          .avatar-name {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;

            span {
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size:30rpx;
              color: #FFFFFF;
              margin-right: 10rpx;
            }
          }

          .avatar-wx {
            display: flex;
            justify-content: flex-start;

            .jb-wx {
              width: 142rpx;
              height: 42rpx;
              line-height: 42rpx;
              text-align: center;
              background: rgba(255, 255, 255, 0.3);
              border-radius: 8rpx 8rpx 8rpx 8rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 500;
              font-size: 22rpx;
              color: #FFFFFF;
              margin-right: 20rpx;
            }

            .edit {
              width: 142rpx;
              height: 42rpx;
              line-height: 42rpx;
              text-align: center;
              background: #FD9D02;
              border-radius: 8rpx 8rpx 8rpx 8rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 500;
              font-size: 22rpx;
              color: #FFFFFF;
              margin-right: 20rpx;
            }
          }

        }
      }


    }

    .panel-list {
      padding: 0 10px;
      position: relative;
      top: -10px;

      .panel {
        border-radius: 3px;
        margin-bottom: 8px;

        .panel-body {
          width: 710rpx;
          height: 92rpx;
          background: #FFFFFF;
          border-radius: 12rpx;
          margin-bottom: 20rpx;
          display: flex;
          justify-content: space-around;

          .panel-item {
            width: 674rpx;
            height: 92rpx;
            line-height: 92rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size:30rpx;
            padding-left: 36rpx;

            .wddd {
              width: 25rpx;
              height: 30rpx;
              background: url('https://img.5211game.com/Base/WxActivityCenter/wddd.png');
              background-size: cover;
              margin-right: 20rpx;
            }

            .wdsc {
              width: 32rpx;
              height: 32rpx;
              background: url('https://img.5211game.com/Base/WxActivityCenter/wdsc.png');
              background-size: cover;
              margin-right: 13rpx;
            }

            .kfgd {
              width: 32rpx;
              height: 32rpx;
              background: url('https://img.5211game.com/Base/WxActivityCenter/kfgd.png');
              background-size: cover;
              margin-right: 13rpx;
            }

            .wdyhq {
              width: 32rpx;
              height: 32rpx;
              background: url('https://img.5211game.com/Base/WxActivityCenter/wdyhq.png');
              background-size: cover;
              margin-right: 13rpx;
            }

            .lxkf {
              width: 32rpx;
              height: 32rpx;
              background: url('https://img.5211game.com/Base/WxActivityCenter/lxkf.png');
              background-size: cover;
              margin-right: 13rpx;
            }
          }
        }
      }
    }

  }
</style>